<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>评价</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weui.css" />
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weuix.css" />
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.min.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.weui.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/swipe.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/macy.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/php.js"></script>
    <script src="/lobstersdk/lobster.js"></script>
    <script src="/jslib/template-web.js"></script>
    <style>
        .bottom {
            background-color: #F5F5F5;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            align-items: center;
            display: flex;
            padding: 10px 4px;
        }

        .btn {
            height: 40px;
            line-height: 40px;
        }
    </style>
</head>

<body ontouchstart>
    <div class="weui-panel__bd" id="goodslist">

    </div>
    <div style="height: 10px;background-color:#F5F5F5;"></div>
    <div id="evaluatelist">

    </div>
</body>

</html>

<script type="text/template" id="goodstemp">
     <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
            <div class="weui-media-box__hd">
                <img class="weui-media-box__thumb" src="{{goods.SpecImg}}" alt="">
            </div>
            <div class="weui-media-box__bd">
                <h4 class="weui-media-box__title">{{goods.GoodsName}}</h4>
                <p class="weui-media-box__desc">规格 {{goods.SpecName}}</p> 
            </div>
        </a> 
</script>
<script type="text/template" id="evaluatetemp">
    <div class="weui-cells__title">总体评价</div>
        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>满意度</p>
                </div>
                <div class="weui-cell__ft">
                    <div class="weui-rater">
                        {{each star item}}
                        {{if(evalute.Star>=item)}}
                        <a data-num="{{item}}" class="on"><span>★</span> </a>
                        {{else}}
                        <a data-num="{{item}}" ><span>★</span> </a>
                        {{/if}}
                        {{/each}} 
                    </div>
                </div>
            </div>
        </div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <textarea class="weui-textarea"  placeholder="说说您对这次购物的具体感受" rows="3">{{evalute.Cont}}</textarea>
                </div>
            </div>
        </div>
        {{if(evalute.OrderEvaluateId==0)}}
        <div class="bottom">
            <div style="flex:1;text-align:right;">
                <a href="javascript:;"
                    class="btn weui-btn weui-btn_mini weui-btn_primary bg-orange saveEvaluate"></i>提交</a>
            </div>
        </div>
        {{/if}}
</script>
<script>

    lobsterh5.main({
        data: {
            evalute: {
                Star: 0,
            }, //评估
            goods: {},
            flag: true,
            star: [1, 2, 3, 4, 5]
        },
        //初始化页面
        pageload: function () {
            var self = this;
            self.initevent();
            self.data.goods = JSON.parse(lobsterh5.GetUrlParam("goods", decodeURIComponent(location.href)));
            self.initgoods();
            self.getEvaluateDetail();
        },
        //初始化事件
        initevent: function () {
            var self = this;
            $("#evaluatelist").on("click", ".weui-rater a", function () {
                var index = $(this).index();  //当前点击 
                for (var i = 0; i <= index; i++) {
                    $(".weui-rater a").eq(i).addClass('on');
                }
                for (var j = index; j <= 5; j++) {
                    $(".weui-rater a").eq(j).removeClass('on');
                }
                $(this).addClass('on');
                self.data.evalute.Star = $(this).data('num');
            })
            $("#evaluatelist").on("input", ".weui-textarea", function () {
                self.data.evalute.Cont = $(this).val();
            })

            $("#evaluatelist").on("click", ".saveEvaluate", function () {
                self.saveEvaluate();
            })

        },
        initgoods: function () {
            var self = this;
            var html = template("goodstemp", { goods: self.data.goods });
            $("#goodslist").html(html);
        },
        getEvaluateDetail: function () {
            var self = this;
            var goods = self.data.goods
            lobsterh5.GET("/lowcode/APP20200616102057595/shop/?fun=mall.GetEvaluateDetail", {
                orderNo: goods.OrderNo,
                goodsId: goods.GoodsId,
                specDetailId: goods.SpecDetailId,
            }).then(res => {
                self.data.evalute = res.detail;
                if (!self.data.evalute.OrderEvaluateId) {
                    self.data.evalute = {
                        Star: 0,
                        OrderEvaluateId: 0,
                        Cont: "",
                    }
                }
                var html = template("evaluatetemp", { star: self.data.star, evalute: self.data.evalute });
                $("#evaluatelist").html(html);
            }).catch(res => {
                $.toast(res.msg, 'forbidden');
            })
        },
        /**
             * 保存评价
             * **/
        saveEvaluate: function (e) {
            var self = this;
            self.data.evalute.UserId = localStorage.getItem("userId")
            self.data.evalute.OrderNo = self.data.goods.OrderNo;
            self.data.evalute.GoodsId = self.data.goods.GoodsId;
            self.data.evalute.SpecDetailId = self.data.goods.SpecDetailId;
            self.data.evalute.SpecName = self.data.goods.SpecName;
            if(self.data.evalute.Star<=0){
                $.toast("请选择评分", 'text');
                return;
            }
            if(!self.data.evalute.Cont){
                $.toast("请填写评价", 'text');
                return;
            }
            lobsterh5.POST("/lowcode/APP20200616102057595/shop/?fun=mall.SaveEvaluate", self.data.evalute).then(res => {
                $.toast("评价成功");
                setTimeout(() => {
                    location.href = "../order/list.html";
                }, 1000);
            }).catch(res => {
                $.toast(res.msg, 'forbidden');
            })
        },
    })
</script>